.liuyao {
  .margins {
    margin: 0 auto;
    max-width: 1500px;
    padding: 5px 60px 30px 60px;

    /* ★导航 */
    .affix {
      .divider {
        margin: -20px 0 -15px 0;
      }

      .prediction {
        float: right;
        margin-top: -35px;

        .spacing {
          margin-right: 20px;
          text-align: center;
          font-weight: bold;

          .tag {
            background-color: #00ccff;
            border-radius: 50px 10px 50px 10px;
            margin-top: 0;
            width: 110px;
            transition: .3s;

            .item {
              color: white;

            }
          }
        }

        .spacing:hover {
          .tag {
            background-color: #26acff;
            transition: .3s;
          }
        }

        .r {
          margin-right: -20px;
        }
      }
    }

    /* ★示例数据、选项 */
    .sl-row {

      // ▲示例数据
      .sl-card {
        height: 502px;
        border-radius: 10px;
        background-color: rgba(252, 252, 252);

        .header {
          font-size: 18px;
          text-align: center;
          margin: -13px 0 -20px 0;
        }

        // 基础数据
        .jc-card {
          // border: red 1px solid;
          border: none;
          border-radius: 0;
          margin: -17px 0 0 -17px;
          background-color: rgba(255, 255, 255, 0);

          .data {
            margin: -20px -15px -20px -18px;

            .tag {
              width: 100%;
              border-radius: 5px;
              height: 60px;
              line-height: 60px;
              font-size: 15px;
            }

            div {
              margin-bottom: 7.5px;
            }

          }

        }

        // 卦象
        .gx-card {
          border: black 1px solid;
          border: none;
          border-radius: 0;
          margin: -15px -15px -20px 0;
          background-color: rgba(255, 255, 255, 0);

          .data {
            margin: -20px -20px 0 -20px;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;

            .gx {

              // 上半部分
              .top {
                height: 50px;
                line-height: 50px;
                font-weight: bold;
                background-color: rgb(200, 200, 200);
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;

                .left {
                  margin-left: 30px;

                  .name {
                    float: left;
                    font-size: 24px;
                    color: rgb(80, 80, 80);
                  }
                }

                .right {
                  float: right;
                  margin-right: 30px;

                  .week {
                    color: rgb(80, 80, 80);
                  }
                }
              }

              // 下半部分
              .bottom {
                height: 395px;
                background-color: rgb(252, 252, 252);
                border: rgb(228, 231, 237) 1px solid;
                border-top: none;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;

                .g {

                  .card-t {
                    background-color: rgb(253, 253, 253);
                    border-radius: 5px 5px 0px 0px;
                    border-bottom: none;
                    height: 40px;
                    margin: -10px -10px 0 -10px;

                    .title {
                      text-align: center;
                      margin: 0 auto -21.5px;
                      color: rgb(101, 101, 101);
                      font-weight: bolder;
                      margin-top: -13px;
                    }

                  }

                  .card-b {
                    height: 145px;
                    overflow-x: auto;
                    background-color: rgb(253, 253, 253);
                    border-radius: 0px 0px 5px 5px;
                    margin: 0 -10px 0 -10px;
                    padding-top: 10px;

                    .naming {
                      font-size: 12px;
                      margin: -20px 0 0 3px;
                      color: rgb(180, 180, 180);

                      .ym {}

                      .gx {
                        margin-left: 33px;
                      }

                      .sy {
                        margin-left: 30px;
                      }

                      .lq {
                        margin-left: 13px;
                      }

                      .gz {
                        margin-left: 35px;
                      }

                      .wx {
                        margin-left: 30px;
                      }

                      .ls {
                        margin-left: 5px;
                      }

                      .yc {
                        margin-left: 11px;
                      }
                    }

                    .yaoming {
                      float: left;
                      width: 40px;

                      // margin-top: -1px;
                      >div {
                        color: #323232;
                        height: 16.5px;
                        // line-height: 16.5px;
                        font-size: 13px;
                      }
                    }

                    .guaxiang {
                      float: left;
                      margin: -25px -5px 0 -20px;
                      color: rgb(50, 50, 50);

                      >div {
                        zoom: 8;
                      }
                    }

                    .marki {
                      margin: 0 0 0 0;

                      >div {
                        height: 17px;
                        font-size: 13px;
                      }
                    }

                    .shiying {
                      margin: -101px 0 0 125px;

                      >div {
                        height: 16.5px;
                        // line-height: 16.5px;
                        font-size: 13px;
                        font-family: 楷体, serif !important;
                      }
                    }

                    .liuqin {
                      margin: -100px 0 0 150px;

                      >div {
                        height: 16.5px;
                        // line-height: 17px;
                        font-size: 13px;
                      }
                    }

                    .ganzhi {
                      margin: -99px 0 0 185px;

                      >div {
                        height: 16.5px;
                        // line-height: 16.5px;
                        font-size: 13px;
                      }

                      .nayin {
                        // font-size: 10px;
                        font-family: 楷体;
                      }
                    }

                    .wuxing {
                      margin: -99px 0 0 268px;

                      >div {
                        height: 16.5px;
                        // line-height: 16.5px;
                        font-size: 13px;
                      }
                    }

                    .liushen {
                      margin: -99px 0 0 292px;

                      >div {
                        height: 16.5px;
                        // line-height: 16.5px;
                        font-size: 13px;
                      }
                    }

                    .yaoci {
                      margin: -98.5px 0 0 328px;
                      font-family: 宋体, serif;

                      >div {
                        height: 16.5px;
                        // line-height: 16.5px;
                        font-size: 13px;
                        white-space: nowrap;
                      }
                    }

                  }

                  .mb {
                    margin-bottom: 17px;
                  }

                }

              }

            }

          }
        }

      }

      /* ▲选项 */
      .xx-card {
        min-height: 500px;
        border-radius: 10px;
        margin-left: 10px;
        background-color: rgba(252, 252, 252);

        .header {
          font-size: 19px;
          text-align: center;
          margin: -14px 0 -20px 0;
        }

        .data {
          margin: -5px 0 0 0;

          .el-input__prefix .el-input__inner {
            width: 20px;
          }

          // 姓名
          .name {}

          // 占事
          .occupy {
            margin: 10px 0 0 0;
          }

          // 日期类型
          .dateType {
            float: left;
            margin: 18px 0 0 0;

            .segmented {
              --el-segmented-item-selected-color: rgb(255, 255, 255);
              --el-segmented-item-selected-bg-color: rgb(193, 155, 79);
              --el-border-radius-base: 16px;
            }
          }

          // 性别
          .sex {
            float: right;
            margin: 18px 0 0 0;

            .segmented {
              --el-segmented-item-selected-color: rgb(255, 255, 255);
              --el-segmented-item-selected-bg-color: rgb(193, 155, 79);
              --el-border-radius-base: 16px;
            }
          }

          // 日期
          .date {
            margin: 68px 0 0 0;

            .leapMonth {
              float: right;
              margin: 5px 0 0 0;
              color: rgb(70, 70, 70);
              -webkit-user-select: none;
              -moz-user-select: none;
              -o-user-select: none;
              user-select: none;
            }
          }

          // 真太阳时
          .trueSolar {
            margin: 10px 0 0 0;

            span {
              -webkit-user-select: none;
              -moz-user-select: none;
              -o-user-select: none;
              user-select: none;
            }

            .beta {
              color: rgb(255, 63, 63);
              font-size: 13px;
              border-radius: 5px;
              background-color: rgb(254, 228, 247);
              margin: 0 0 0 5px;
            }
          }

          // 地区
          .address {
            float: right;
            margin: -21px 0 0 0;

            .city {
              width: auto;
            }
          }

          // 起卦模式
          .qiGuaMode {
            margin: 16px 0 0 0;

            .prefix {
              margin: 0 8px 0 5px;
              vertical-align: -3px;
            }

            .moren {
              float: right;
              color: #8492a6;
              font-size: 12px;
            }

            .tip {
              margin-left: 7px;
            }
          }

          // 手动选择六爻按钮
          .shouDong {
            margin: 18px 0 0 0;
          }

          // 重置选项
          .resetting {
            margin: 40px 0 0 0;
            float: left;

            .resDate {
              -webkit-touch-callout: none;
              -webkit-user-select: none;
              -khtml-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;
              margin-left: 10px;
              vertical-align: -2px;
              color: rgb(70, 70, 70);
            }
          }

          // 高级选项
          .senior {
            margin: 40px 0 0 0;
            float: right;
          }

          // 开始起卦
          .starts {
            margin: 120px 0 0 0;
            text-align: center;

            .button {
              cursor: pointer;
              width: 100%;
              height: 50px;
              color: rgb(96, 98, 102);
              border: 1px rgb(150, 150, 150) solid;
              border-radius: 30px;
              font-size: 16px;
              background-color: rgb(251, 251, 251);
              transition: .3s;
            }

            .button:focus {
              color: rgb(96, 98, 102);
              background-color: rgb(249, 249, 249);
            }

            .button:hover {
              color: rgb(96, 98, 102);
              background-color: rgb(247, 247, 247);
              transition: .3s;
            }

            .button:active {
              color: rgb(96, 98, 102);
              background-color: rgb(243, 243, 243);
            }
          }

        }

      }

    }

    /* ★完整数据切换选项、完整数据 */
    .wz-row {

      /* ▲完整数据切换选项 */
      .wzqh-card {
        height: 500px;
        border-radius: 5px;
        border: none;
        background-color: rgba(255, 255, 255, 0);
        -webkit-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;

        .data {
          margin: -20px;

          .button1 {
            color: rgb(80, 80, 80);
            cursor: pointer;
            border: 1px rgb(228, 231, 237) solid;
            // border: none;
            height: 50px;
            line-height: 50px;
            border-radius: 15px;
            text-align: center;
            background-color: white;
            transition: .3s;
            margin-bottom: 15px;
            font-size: 15px;
          }

          .button1:hover {
            transition: .3s;
            // color: rgb(193, 155, 79);
            background-color: rgb(253, 253, 253);
          }

          .button2 {
            color: rgb(80, 80, 80);
            cursor: pointer;
            border: 1px rgb(228, 231, 237) solid;
            // border: none;
            height: 60px;
            line-height: 60px;
            border-radius: 10px;
            text-align: center;
            background-color: white;
            transition: .3s;
            margin-bottom: 15px;
            font-size: 15px;
          }

          .button2:hover {
            transition: .3s;
            // color: rgb(193, 155, 79);
            background-color: rgb(253, 253, 253);
          }

        }

      }

      /* ▲完整数据 */
      .wz-card {
        border-radius: 0;
        border: none;
        margin-left: 10px;
        background-color: rgba(255, 255, 255, 0);

        .data {
          margin: -20px;
          // -webkit-touch-callout: none;
          // -webkit-user-select: none;
          // -khtml-user-select: none;
          // -moz-user-select: none;
          // -ms-user-select: none;
          // user-select: none;

          // 基本信息
          .jb {

            // 上半部分
            .top {
              height: 80px;
              line-height: 80px;
              font-weight: bold;
              background-color: rgb(220, 220, 220);
              border-top-left-radius: 15px;
              border-top-right-radius: 15px;

              .name {
                float: left;
                font-size: 30px;
                color: rgb(80, 80, 80);
                margin-left: 30px;
              }

              .date {
                color: rgb(80, 80, 80);
                padding-left: 40px;
                vertical-align: -2px;

                .mr {
                  margin-right: 30px;
                }
              }

              .week {
                float: right;
                color: rgb(80, 80, 80);
                margin-right: 30px;
              }
            }

            // 下半部分
            .bottom {
              min-height: 500px;
              background-color: white;
              border-bottom-left-radius: 15px;
              border-bottom-right-radius: 15px;
              border-left: rgb(232, 234, 236) 1px solid;
              border-right: rgb(232, 234, 236) 1px solid;
              border-bottom: rgb(232, 234, 236) 1px solid;
              padding: 10px 10px 0 10px;

              .jb1 {
                height: 139px;
                margin: 0 5px 10px 0;
                border-radius: 10px;
                border: rgb(232, 234, 236) 1px solid;
                padding: 10px;

                .title {
                  text-align: center;
                  font-weight: bold;
                  font-size: 15px;
                  color: rgb(100, 100, 100);
                  margin-top: -8px;
                }

                .divider {
                  margin: -23px -10px -15px -10px;
                }

                .bc1 {
                  margin: -25px -10px 0 -10px;
                  height: 28px;
                  line-height: 28px;
                  background-color: rgba(251, 251, 251);

                  .title {
                    font-weight: bold;
                    margin: 0 10px 0 5px;
                    color: rgb(160, 160, 160);
                  }

                  .null {
                    color: rgb(150, 150, 150);
                  }
                }

                .bc2 {
                  margin: 0 -10px 0 -10px;
                  height: 28px;
                  line-height: 28px;
                  background-color: rgba(243, 243, 243);

                  .title {
                    font-weight: bold;
                    margin: 0 10px 0 5px;
                    color: rgb(160, 160, 160);
                  }

                  .null {
                    color: rgb(150, 150, 150);
                  }

                }

                .bc3 {
                  margin: 0 -10px 0 -10px;
                  height: 28px;
                  line-height: 28px;
                  background-color: rgba(251, 251, 251);

                  .title {
                    font-weight: bold;
                    margin: 0 10px 0 5px;
                    color: rgb(160, 160, 160);
                  }
                }

                .radius {
                  border-radius: 0 0 10px 10px;
                }

              }

              .jb2 {
                height: 139px;
                margin: 0 0 10px 5px;
                border-radius: 10px;
                border: rgb(232, 234, 236) 1px solid;
                padding: 10px;

                .title {
                  text-align: center;
                  font-weight: bold;
                  font-size: 15px;
                  color: rgb(100, 100, 100);
                  margin-top: -8px;
                }

                .divider {
                  margin: -23px -10px -15px -10px;
                }

                .bc1 {
                  color: rgb(160, 118, 34);
                  margin: -25px -10px 0 -10px;
                  height: 37px;
                  line-height: 37px;
                  background-color: rgba(251, 251, 251);

                  .title {
                    font-weight: bold;
                    margin: 0 10px 0 5px;
                    color: rgb(160, 160, 160);
                  }
                }

                .bc2 {
                  color: rgb(160, 118, 34);
                  margin: 0 -10px 0 -10px;
                  height: 38px;
                  line-height: 38px;
                  background-color: rgba(243, 243, 243);

                  .title {
                    font-weight: bold;
                    margin: 0 10px 0 5px;
                    color: rgb(160, 160, 160);
                  }

                  .null {
                    color: rgb(150, 150, 150);
                  }

                }

                .bc3 {
                  color: rgb(160, 118, 34);
                  margin: 0 -10px 0 -10px;
                  height: 37px;
                  line-height: 37px;
                  background-color: rgba(251, 251, 251);

                  .title {
                    font-weight: bold;
                    margin: 0 10px 0 5px;
                    color: rgb(160, 160, 160);
                  }

                  .null {
                    color: rgb(150, 150, 150);
                  }
                }

                .radius {
                  border-radius: 0 0 10px 10px;
                }
              }

              .jb3 {

                .g {

                  .card-t {
                    background-color: rgb(253, 253, 253);
                    border-radius: 5px 5px 0px 0px;
                    border-bottom: none;
                    height: 29px;
                    border-radius: 10px 10px 0 0;

                    .title {
                      text-align: center;
                      color: rgb(101, 101, 101);
                      font-weight: bolder;
                      margin-top: -19px;
                    }

                  }

                  .card-b {
                    height: 138px;
                    overflow-x: auto;
                    background-color: rgb(253, 253, 253);
                    padding-top: 10px;
                    border-radius: 0 0 10px 10px;

                    .naming {
                      font-size: 12px;
                      margin: -20px 0 0 3px;
                      color: rgb(180, 180, 180);

                      .ym {}

                      .gx {
                        margin-left: 33px;
                      }

                      .sy {
                        margin-left: 30px;
                      }

                      .lq {
                        margin-left: 13px;
                      }

                      .gz {
                        margin-left: 35px;
                      }

                      .wx {
                        margin-left: 30px;
                      }

                      .ls {
                        margin-left: 5px;
                      }

                      .yc {
                        margin-left: 11px;
                      }
                    }

                    .yaoming {
                      float: left;
                      width: 40px;

                      // margin-top: -1px;
                      >div {
                        color: #323232;
                        height: 16.5px;
                        // line-height: 16.5px;
                        font-size: 13px;
                      }
                    }

                    .guaxiang {
                      float: left;
                      margin: -25px -5px 0 -20px;
                      color: rgb(50, 50, 50);

                      >div {
                        zoom: 8;
                      }

                      .fc {
                        // color: #b28b3e !important;
                      }
                    }

                    .marki {
                      margin: 0 0 0 0;

                      >div {
                        height: 17px;
                        font-size: 13px;
                      }
                    }

                    .shiying {
                      margin: -101px 0 0 125px;

                      >div {
                        height: 16.5px;
                        // line-height: 16.5px;
                        font-size: 13px;
                        font-family: 楷体, serif !important;
                      }
                    }

                    .liuqin {
                      margin: -100px 0 0 150px;

                      >div {
                        height: 16.5px;
                        // line-height: 17px;
                        font-size: 13px;
                      }
                    }

                    .ganzhi {
                      margin: -99px 0 0 185px;

                      >div {
                        height: 16.5px;
                        // line-height: 16.5px;
                        font-size: 13px;
                      }

                      .nayin {
                        // font-size: 10px;
                        font-family: 楷体;
                      }
                    }

                    .wuxing {
                      margin: -99px 0 0 268px;

                      >div {
                        height: 16.5px;
                        // line-height: 16.5px;
                        font-size: 13px;
                      }
                    }

                    .liushen {
                      margin: -99px 0 0 292px;

                      >div {
                        height: 16.5px;
                        // line-height: 16.5px;
                        font-size: 13px;
                      }
                    }

                    .yaoci {
                      margin: -98.5px 0 0 328px;
                      font-family: 宋体, serif;

                      >div {
                        height: 16.5px;
                        // line-height: 16.5px;
                        font-size: 13px;
                        white-space: nowrap;
                      }
                    }

                  }

                  .card-b2 {
                    height: 138px;
                    overflow-x: auto;
                    background-color: rgb(253, 253, 253);
                    padding-top: 10px;
                    border-radius: 0 0 10px 10px;

                    .naming {
                      font-size: 12px;
                      margin: -20px 0 0 3px;
                      color: rgb(180, 180, 180);

                      // font-family: 黑体, serif !important;
                      .ym {}

                      .gx {
                        margin-left: 33px;
                      }

                      .sy {
                        margin-left: 30px;
                      }

                      .fs {
                        margin-left: 8px;
                      }

                      .lq {
                        margin-left: 10px;
                      }

                      .gz {
                        margin-left: 35px;
                      }

                      .wx {
                        margin-left: 30px;
                      }

                      .ls {
                        margin-left: 5px;
                      }

                      .yc {
                        margin-left: 11px;
                      }
                    }

                    .yaoming {
                      float: left;
                      width: 40px;

                      // margin-top: -1px;
                      >div {
                        color: #323232;
                        height: 16.5px;
                        // line-height: 16.5px;
                        font-size: 13px;
                      }
                    }

                    .guaxiang {
                      float: left;
                      margin: -25px -5px 0 -20px;
                      color: rgb(50, 50, 50);

                      >div {
                        zoom: 8;
                      }

                      .fc {
                        color: #9e7a32 !important;
                      }
                    }

                    .marki {
                      margin: 0 0 0 0;

                      >div {
                        height: 17px;
                        font-size: 13px;
                      }
                    }

                    .shiying {
                      margin: -101px 0 0 125px;

                      >div {
                        height: 16.5px;
                        // line-height: 16.5px;
                        font-size: 13px;
                        font-family: 楷体, serif !important;
                      }
                    }

                    .fushen {
                      font-weight: bold;
                      color: #b28b3e;
                      margin: -100px 0 0 151px;

                      >div {
                        font-size: 13px;
                        height: 16.5px;
                        // line-height: 16.5px;
                        font-family: 楷体, serif !important;
                      }
                    }

                    .liuqin {
                      margin: -100px 0 0 180px;

                      >div {
                        height: 16.5px;
                        // line-height: 17px;
                        font-size: 13px;
                      }
                    }

                    .ganzhi {
                      margin: -99px 0 0 215px;

                      >div {
                        height: 16.5px;
                        // line-height: 16.5px;
                        font-size: 13px;
                      }

                      .nayin {
                        // font-size: 10px;
                        font-family: 楷体;
                      }
                    }

                    .wuxing {
                      margin: -99px 0 0 300px;

                      >div {
                        height: 16.5px;
                        // line-height: 16.5px;
                        font-size: 13px;
                      }
                    }

                    .liushen {
                      margin: -99px 0 0 322px;

                      >div {
                        height: 16.5px;
                        // line-height: 16.5px;
                        font-size: 13px;
                      }
                    }

                    .yaoci {
                      margin: -98.5px 0 0 358px;
                      font-family: 宋体, serif;

                      >div {
                        height: 16.5px;
                        // line-height: 16.5px;
                        font-size: 13px;
                        white-space: nowrap;
                      }
                    }

                  }

                  .mb {
                    margin-bottom: 10px;
                  }

                  .fu-t {
                    background-color: rgb(253, 253, 253);
                    border-radius: 5px 5px 0px 0px;
                    border: #ac952d 2px solid;
                    border-bottom: none;

                    .title {
                      .default {
                        color: #9e7a32 !important;
                      }
                    }
                  }

                  .fu-b {
                    background-color: rgb(253, 253, 253);
                    border-radius: 0px 0px 5px 5px;
                    border: #ac952d 2px solid;
                    // border-top: #e4e7ed 1px solid;
                  }
                }

                .mt-row {
                  // margin-top: -8px;

                  .jjr {
                    margin-right: 4px;
                  }

                  .jjl {
                    margin-left: 4px;
                  }

                }

              }

            }

          }

        }

      }

    }

  }
}